<script setup lang='ts'>
import { getSelfConfigApi, updateConfigApi, resetConfigApi } from '@/api/security';
import { R, SysConfig } from '@/interface/user';
import { useGlobalStore } from '@/store/globalStore';
import { CheckOutlined, CloseOutlined, SaveOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const settingModalOpen = ref<boolean>(false)

const openSettingModal = () => {
  settingModalOpen.value = true
}

const globalStore = useGlobalStore()

const toggleDarkMode = (checked: boolean | string | number) => {
  globalStore.toggleDarkMode(checked as string)
}

const toggleDyTitleMode = (checked: boolean | string | number) => {
  globalStore.toggleDyTitleMode(checked as string)
}

const toggleLogoMode = (checked: boolean | string | number) => {
  globalStore.toggleLogoMode(checked as string)
}

const getSelfConfig = async () => {
  const { data: res }: { data: R<SysConfig> } = await getSelfConfigApi()
  globalStore.setSysConfig(res.data)
}

const updateConfig = async () => {
  const { data: res }: { data: R<any> } = await updateConfigApi({
    darkMode: globalStore.darkMode,
    dyTitleMode: globalStore.dyTitleMode,
    logoMode: globalStore.logoMode,
    themeColor: globalStore.themeColor
  })
  if (res.code === 200) {
    message.success('已保存')
  }else{
    message.error(res.msg)
  }
}

const resetConfig = async () => {
  const { data: res }: { data: R<any> } = await resetConfigApi()
  if (res.code === 200) {
    globalStore.resetSysConfig()
  }else{
    message.error(res.msg)
  }
}

onMounted(() => {
  getSelfConfig()
})

defineExpose({ openSettingModal })
</script>
 
<template>
  <a-drawer v-model:open="settingModalOpen" class="custom-class" root-class-name="root-class-name" title="设置"
    placement="right">
    <a-space>
      <span class="font-semibold dark:text-white">主题颜色</span>
      <input type="color" :value="globalStore.themeColor"
        @input="(e: any) => (globalStore.themeColor = e.target?.value)" />
    </a-space>
    <div class="h-4"></div>
    <p class=" dark:text-white">暗夜模式</p>
    <a-switch v-model:checked="globalStore.darkMode" checkedValue="1" unCheckedValue="0" class="mt-2"
      @change="toggleDarkMode">
      <template #checkedChildren>
        <i class="iconfont">&#xe70f;</i>
      </template>
      <template #unCheckedChildren>
        <div class="iconfont translate-y-[-2px] scale-110">&#xe635;</div>
      </template>
    </a-switch>
    <div class="h-4"></div>
    <p class=" dark:text-white">动态标题</p>
    <a-switch v-model:checked="globalStore.dyTitleMode" checkedValue="1" unCheckedValue="0" class="mt-2"
      @change="toggleDyTitleMode">
      <template #checkedChildren>
        <CheckOutlined />
      </template>
      <template #unCheckedChildren>
        <CloseOutlined />
      </template>
    </a-switch>
    <div class="h-4"></div>
    <p class=" dark:text-white">显示LOGO</p>
    <a-switch v-model:checked="globalStore.logoMode" checkedValue="1" unCheckedValue="0" class="mt-2"
      @change="toggleLogoMode">
      <template #checkedChildren>
        <CheckOutlined />
      </template>
      <template #unCheckedChildren>
        <CloseOutlined />
      </template>
    </a-switch>

    <div class="mt-4">
      <a-space>
        <a-button type="primary" size="middle" class="flex items-center" ghost @click="updateConfig">
          <template #icon>
            <SaveOutlined />
          </template>
          保存配置
        </a-button>
        <a-button size="middle" class="flex items-center" @click="resetConfig">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置配置
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
 
<style lang='scss' scoped></style>